<template>
  <div class="app">
    <dv-border-box-8 style="width: 100%; height: 100%">
      <div id="container" style="width: 100%; height: 200px;margin-bottom: 0;"></div>
      <div class="tab">
        <el-table :data="tableData" style="width: 100%; height: 200px;">
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
        </el-table>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import Highcharts3D from "highcharts/highcharts-3d";
Highcharts3D(Highcharts);
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    getInfo() {
      var chart = Highcharts.chart("container", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          backgroundColor: "",
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        title: {
          text: "",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "浏览器占比",
            data: [
              ["Firefox", 45.0],
              ["IE", 26.8],
              {
                name: "Chrome",
                y: 12.8,
                sliced: true,
                selected: true,
              },
              ["Safari", 8.5],
              ["Opera", 6.2],
              ["Others", 0.7],
            ],
          },
        ],
      });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style lang="scss" scoped>
.app {
  width: 486px;
  // height: 569px;
  margin: 0 30px;

}

.el-table {
  background: transparent !important;
}

.el-table::before {
  width: 0 !important;
}

.el-table--enable-row-transition {
  background-color: #14346F;
  color: #095bf3;
}

::v-deep tr {
  background-color: rgba(0, 0, 0, 0);
}

::v-deep th.el-table__cell.is-leaf {
  color: #095bf3;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px dashed;
}

::v-deep td.el-table__cell {
  border-bottom: 1px dashed #065af5;
}
</style>